{% extends "product/product_list.html" %}
{% block subtitle_content%}
{% url 'product_view' as product_url %}
<div class="c-m-list">
    <div class="c-m-l-chanpin-details-topbar">
       <div class="tab-warp-area pull-left"> 
            <div class="img_area big-pic">
                <img  src="{{product.img.url}}" class="tab-li-big-img"/>
            </div>
            <ul class="pic-list">
                <li><img src="{{product.img.url}}" alt="" class="tab-li-small-img"/></li>

                <li><img src="/static/images/index-product-img1.jpg" alt="" class="tab-li-small-img"/></li>

                <li><img src="/static/images/adddress-map.jpg" alt="" class="tab-li-small-img"/></li>
            </ul>
        </div>
        <div class="pull-right c-m-l-chanpin-details">
            <h2>
                产品名称：{{product.name}}
            </h2>
            <p >产品型号：{{product.version}} </p>
            <p>更新时间：{{product.pub_time | date:"Y-m-d H:i"}} </p>
        </div>
    </div>
<br>
{% autoescape off %}
    {{product.introduce}}
{% endautoescape %}
<div class="cp-details-notebar">

    <div class="pull-left cp-details-notebar-p">
        {% if previous_obj %}
            <p><a href="{% url 'product_details' previous_obj.id %}?nav_id={{localnav.id}}" target="_self">上一条:{{previous_obj.name}}</a></p>
        {%else%}
            <p><a href="#" target="_self">上一条: 没有啦!</a></p>
        {% endif %}

        {% if next_obj %}
           <p> <a href="{% url 'product_details' next_obj.id %}?nav_id={{localnav.id}}" target="_self">下一条:{{next_obj.name}}</a></p>
        {%else%}
           <p><a href="#" target="_self">下一条: 没有啦!</a></li></p>
        {% endif %}

    </div>
    <div class="pull-right">
        <a href="{{product_url}}&nav_id={{localnav.id}}" class="btn-back-active-l">返回列表 > </a>
    </div>
</div>
<div class="cp-details-list-foot">
    <h2>您感兴趣的产品</h2>
    <ul class=" c-m-news-fav-footul ">
        {%for cp in related_products%}
            <li><a href="{% url 'product_details' cp.id %}?nav_id={{localnav.id}}" class="c-m-news-fav-footul-l-a">{{cp.name}}</a></li>
        {%endfor%}
    </ul>
</div>


<script type="text/javascript"> 
    var i = 0;
    var len = $(".pic-list li").length;
    var showTime = setInterval(function(){
        if(i<len){
            i++;
        }else{
            i = 0;
        }
        var nowImg = $(".pic-list li").find("img").eq(i).attr("src");
        $(".big-pic img").attr("src",nowImg);

    },3000);
    $(".pic-list li").hover(function(){
        i = $(this).index();
        console.log(i);
        nowImg = $(".pic-list li").find("img").eq(i).attr("src");
        $(".big-pic img").attr("src",nowImg);
        clearInterval(showTime);
    },function(){
        showTime = setInterval(function(){
        if(i<len){
            i++;
        }else{
            i = 0;
        }
        var nowImg = $(".pic-list li").find("img").eq(i).attr("src");
        $(".big-pic img").attr("src",nowImg);
    },3000);
    });
</script>

{% endblock %}


